<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插槽！！</title>
    <!-- 
        插槽(slot) 与 组件有关！！！
     -->
</head>
<body>
    <div id="app">
        <h1 style="border: 1px solid tomato;">简单的语法！！</h1>
        <father>
            i am text
            <h3> i am element </h3>
        </father>

        <hr />
        <h1 style="border: 1px solid tomato;"   > 默认内容的插槽 </h1>
        <father></father>

        <hr />
        <h1 style="border: 1px solid tomato;"   > 复杂一点语法！！ </h1>        
        <father02>title one</father02>
        <father02>title two</father02>
        <father02>title three</father02>


    </div>
    
    <script src="vue.js"></script>
    <script>
        // 简单的语法！！
        Vue.component('father',{
            props:[,],
            template:`
            <div>
                <h1></h1>
                <!-- // 插槽 -->
                <slot>default content！</slot>
                <h1></h1>
            </div>
            `,
        });

        // 复杂一点语法！！
        Vue.component('father02',{
            props:[,],
            template:`
            <div>
                <h1>
                    文章
                    <slot></slot>
                </h1>
                <h3>文章xxxxxxx</h3>
            </div>
            `,
        });

        

        new Vue({
            el:"#app",
            data(){
                return {
                }
            },
        })
    
    </script>
    
</body>
</html>